<template>
  <div class="checkout">
    <van-nav-bar title="订单结算台" left-arrow fixed @click-left="$router.back()" />

    <!-- 配送地址 -->
    <div class="address" @click="$router.push(`/address?from=checkout`)" v-if="order.existAddress">
        <van-icon name="location-o" size="18px"/>
        <div>
          <p>
            <span>{{order.address.name}}</span>
            <span>{{order.address.phone}}</span>
          </p>
          <p>{{addressInfo}}</p>
        </div>
        <van-icon name="arrow" size="14px"/>
    </div>

    <div class="address" @click="$router.push(`/address?from=checkout`)" v-else>
        <van-icon name="location-o" size="18px"/>
        <p>请选择配送地址</p>
        <van-icon name="arrow" size="14px"/>
    </div>

    <!-- 商品列表 -->
    <div class="goods">
        <div class="item" v-for="item in order.goodsList" :key="item.goods_id" @click="$router.push(`/detail?goodsId=${item.goods_id}`)">
            <div>
              <img :src="item.goods_image">
            </div>
            <div class="right">
              <p>{{item.goods_name}}</p>
              <p>
                <span>x{{item.total_num}}</span>
                <span>￥{{item.goods_price_min}}</span>
              </p>
            </div>
        </div>
        <p class="total">共{{order.orderTotalNum}}件商品，合计：<span style="color:red">￥{{order.orderTotalPrice}}</span></p>
    </div>

    <!-- 费用 -->
    <div class="money">
        <p>
            <span>订单总金额：</span>
            <span style="color:red">￥{{order.orderPrice}}</span>
        </p>
        <p>
            <span>优惠券：</span>
            <span v-if="order.couponList" class="red" @click="useCoupon">
              <span>{{isUseCoupon? `-￥${order.couponMoney}`:`有${couponNum}张优惠券` }}</span>
              <van-icon name="arrow" />
              </span>
            <span v-else>无优惠券可用</span>
        </p>
        <p>
            <span>配送费用：</span>
            <span v-if="order.existAddress" class="red">+￥{{order.expressPrice}}</span>
            <span v-else>请先选择配送地址</span>
        </p>
    </div>

    <!-- 支付方式 -->
    <div class="pay">
        <p>
            <span>支付方式</span>
        </p>
        <p>
            <span>
                <van-icon name="balance-o" color="#ff9700" size="16px"/>
                <span class="mode">余额支付</span>
                <span>(可用￥{{personal.balance}}元)</span>
            </span>
            <van-icon name="success" color="red" size="16px" />
        </p>
    </div>

    <!-- 留言 -->
    <input class="note" placeholder="选填：买家留言（50字以内）" type="text" v-model="remark">

    <!-- 提交按钮 -->
    <div class="footer">
      <p>
        <span>实付款：</span>
        <span style="color:red">￥{{order.orderPayPrice}}</span>
      </p>
      <button @click="submit">提交订单</button>
    </div>

    <!-- 优惠券的弹层 -->
    <van-popup v-model="couponShow" position="bottom" :style="{ height: '60%' }">
      <p class="title">选择优惠券</p>
      <div class="list">
        <CouponItem v-for="item in order.couponList" :key="item.coupon_id" :item="item" @click="choiceCoupon(item)"></CouponItem>
      </div>
      <button class="button" @click="noUseCoupon">不使用优惠券</button>
    </van-popup>

  </div>
</template>

<script>

import { Toast } from 'vant'
import { getCheckoutOrder, submitCheckoutOder } from '@/api/checkout'
import CouponItem from '@/components/CouponItem'

export default {
  data () {
    return {
      order: {},
      personal: {},
      remark: '',
      isUseCoupon: false,
      couponShow: false
    }
  },
  components: {
    CouponItem
  },
  async created () {
    if (this.$route.query.mode === 'cart') {
      const { data } = await getCheckoutOrder({
        mode: 'cart',
        delivery: 10,
        couponId: 0,
        isUsePoints: 0,
        cartIds: this.$route.query.cartIds
      })
      this.order = data.order
      this.personal = data.personal
    }

    if (this.$route.query.mode === 'buyNow') {
      const { data } = await getCheckoutOrder({
        mode: 'buyNow',
        delivery: 10,
        couponId: 0,
        isUsePoints: 0,
        goodsId: this.$route.query.goodsId,
        goodsNum: this.$route.query.goodsNum,
        goodsSkuId: this.$route.query.goodsSkuId
      })
      this.order = data.order
      this.personal = data.personal
    }
  },
  computed: {
    addressInfo () {
      const region = this.order.address.region
      return region.province + region.city + region.region + this.order.address.detail
    },
    couponNum () {
      return this.order.couponList.length
    }
  },
  methods: {
    async getCheckout () {
      if (this.$route.query.mode === 'cart') {
        const { data } = await getCheckoutOrder({
          mode: 'cart',
          delivery: this.order.delivery,
          couponId: this.order.couponId,
          isUsePoints: this.order.isUsePoints,
          cartIds: this.$route.query.cartIds
        })
        this.order = data.order
        this.personal = data.personal
      }

      if (this.$route.query.mode === 'buyNow') {
        const { data } = await getCheckoutOrder({
          mode: 'buyNow',
          delivery: this.order.delivery,
          couponId: this.order.couponId,
          isUsePoints: this.order.isUsePoints,
          goodsId: this.$route.query.goodsId,
          goodsNum: this.$route.query.goodsNum,
          goodsSkuId: this.$route.query.goodsSkuId
        })
        this.order = data.order
        this.personal = data.personal
      }
    },
    async submit () {
      if (this.$route.query.mode === 'cart') {
        await submitCheckoutOder({
          mode: 'cart',
          delivery: this.order.delivery,
          payType: this.order.payType,
          couponId: this.order.couponId,
          isUsePoints: this.order.isUsePoints,
          remark: this.remark,
          cartIds: this.$route.query.cartIds
        })
      }

      if (this.$route.query.mode === 'buyNow') {
        await submitCheckoutOder({
          mode: 'buyNow',
          delivery: this.order.delivery,
          payType: this.order.payType,
          couponId: this.order.couponId,
          isUsePoints: this.order.isUsePoints,
          remark: this.remark,
          goodsId: this.$route.query.goodsId,
          goodsNum: this.$route.query.goodsNum,
          goodsSkuId: this.$route.query.goodsSkuId
        })
      }

      setTimeout(() => {
        Toast('支付成功')
      }, 200)
      this.$router.push('/order')
    },
    useCoupon () {
      this.couponShow = true
    },
    noUseCoupon () {
      this.couponShow = false
      this.order.couponId = 0
      this.isUseCoupon = false
      this.getCheckout()
    },
    choiceCoupon (obj) {
      this.couponShow = false
      this.order.couponId = obj.user_coupon_id
      this.isUseCoupon = true
      this.getCheckout()
    }
  }
}
</script>

<style lang="less" scoped>

.checkout {
 padding-top: 46px;
 padding-bottom: 50px;
}

.van-nav-bar {
    ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

    ::v-deep .van-icon-arrow-left {
        color: black;
    }
}

.address {
    width: 345px;
    height: 19px;
    padding: 17px 15px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    color: #666;
    font-size: 14px;
    background-color: white;
    margin-bottom: 2px;

    p {
        width: 293px;
    }

    span {
          padding-right: 5px;
    }

}

.goods {
    // min-height: 70vh;
    flex: 1; /* 这会使内容区域可以伸缩以填满剩余空间 */
    overflow-y: auto; /* 使内容区可滚动 */
    overflow-x: hidden;

    .item {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      margin: 5px;
      background-color: white;

      img {
        width: 90px;
        height: 90px;
      }

      .right {
        width: 228px;
        height: 90px;

      p:first-child {
        line-height: 1.3;
        white-space: normal;
        color: #484848;
        font-size: 13px;
        display: -webkit-box;  /* 兼容旧版浏览器 */
        -webkit-line-clamp: 2;   /* 显示两行 */
        -webkit-box-orient: vertical;    /* 子元素在垂直方向排列 */
        overflow: hidden;
        text-overflow: ellipsis;
      }

      p:last-child {
        margin-top: 33px;
        height: 25px;
        display: flex;
        justify-content: space-between;

        span:first-child {
            font-size: 13px;
            color: #777;
        }

        span:last-child {
            font-size: 14px;
          color: red;
        }
      }
      }
    }

    .total {
        background-color: white;
        font-size: 14px;
        color: #777;
        padding: 8px 16px;
        text-align: right;
    }
  }

.money {
    background-color: white;
    margin-top: 5px;

    p {
        width: 351px;
        height: 19px;
        padding: 10px 12px;
        border-bottom: 0.5px solid #f8f8f8;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
    }

    p:last-child {
        span:last-child {
            color: #777;
        }
    }

    .red {
      color: red !important;
    }
}

.pay {
    background-color: white;
    margin-top: 5px;

    p {
        width: 351px;
        height: 19px;
        padding: 10px 12px;
        border-bottom: 0.5px solid #f8f8f8;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
    }

    .mode {
        padding: 10px;
    }
}

.note {
    width: 351px;
    height: 53px;
    padding: 5px 12px;
    background-color: white;
    margin-top: 5px;
    border: none;
    font-size: 14px;

}

.footer {
  width: 100%;
  height: 45px;
  background-color: white;
  position:fixed;
  bottom: 0;
  left: 0;
  font-size: 14px;
  color: #777;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;

  p {
    padding-left: 12px;
  }

  button {
    color: white;
    background: linear-gradient(90deg, #f9211c, #ff6335);
    border: none;
    width: 121px;
    height: 100%;
  }
}

.van-popup {

 .title {
  font-size: 15px;
  color: #303133;
  width: 345px;
  height: 20px;
  margin: 10px auto;
  text-align: center;
  margin-bottom: 20px;
 }

 .button {
  position: absolute;
  bottom: 15px;
  left: 33px;
  width: 308px;
  height: 34px;
  color: #888;
  border: 0.5px solid #e3e3e3;
  border-radius: 5px;
  background-color: white;
  font-size: 13px;
 }
}

</style>
